<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Desserts (2D navigation demo)</title>
    <meta name="description" content="2D navigation demo" />
    <meta name="author" content="Henrik Ingo" />
    <link href="../../css/impress-common.css" rel="stylesheet" />
    <link href="css/presentation.css" rel="stylesheet" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<!-- Some images that are fixed to background in the css -->
<img id="applepie-image" class="bg" src="images/6296334551_b3d5c27823_b.png">
<img id="icecream-image" class="bg" src="images/35535918670_f1d12627ff_o.png">
<img id="crisps-image" class="bg" src="images/6636957665_5e7c4a79de_o.png">



<div id="impress" data-transition-duration="1000">

    <div class="step" data-scale="2" data-x="-500" data-y="-500">
        <h1>2D navigation</h1>

        <ul>
        <li>Impress.js allows you to layout your presentation in a 3D space</li>
        <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">The
           goto plugin</a> allows you to specify
           non-linear navigation!</li>
        <li>This demo can be navigated by
            <ul>
            <li>continuously pressing Space</li>
            <li>continuously pressing Right Arrow</li>
            <li>continuously pressing Down Arrow</li>
            <li>(or freely, pressing Up, Down, Right, Left as you choose)</li>
            </ul>
        <li>It's up to you to decide which is the better structure</li>
        </li>
    </div>

    <div id="bm0" class="step" data-scale="1" data-rel-x="1500" data-rel-y="0"
	 data-bookmark-key-list="0">
        <h1>Using bookmark hotkeys</h1>
        <ul>
        <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/bookmark">The
           bookmark plugin</a> also allows you to specify
           non-linear navigation, in a different way.</li>
        <li>This demo can <em>also</em> be navigated by
            <ul>
            <li>pressing 1 2 3 4 5 6 7 8 9 to fast travel directly</li>
            <li>pressing J J J, K K K, L L L to cycle vertically</li>
            <li>pressing U U U, I I I, O O O to cycle horizontally</li>
            <li>pressing Z or [ to zoom out to the full view</li>
            <li>pressing 0 to come back to this text</li>
            </ul>
        </li>
        <li>It's up to you to decide which is the better structure</li>
        </ul>
    </div>

    <div id="contents" class="step" data-rel-x="0" data-rel-y="1500" data-scale="1"
	 data-bookmark-key-list="w" >
        <h1>Choosing a treat</h1>

        <ul>
            <li>You can choose your preferred treat from:
                <ul>
                <li>Ice cream</li>
                <li>Crisps</li>
                <li>Apple pie</li>
                </ul>
            </li>
            <li>We will make a structured pro's &amp; con's analysis to arrive at a conclusion</li>
        </ul>
    </div>

    <!-- Ice cream slides (3) -->
    <div id="icecream" class="step" data-x="2000" data-y="2000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="contents icecream-pro contents crisps"
	 data-bookmark-key-list="7 u j" >
        <h1>Ice cream</h1>

        <ul>
            <li>Cold</li>
            <li>Creamy</li>
            <li>Vanilla or flavored</li>
            <li>Caramel sauce, jams &amp; other toppings</li>
        </ul>
    </div>

    <div id="icecream-pro" class="step" data-rel-x="0" data-rel-y="1000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="icecream icecream-con applepie crisps-pro"
	 data-bookmark-key-list="4 i j" >
        <h1>Ice cream: Pro's</h1>

        <ul>
            <li>Great for dessert or snack</li>
            <li>Great in the Summer</li>
        </ul>
    </div>


    <div id="icecream-con" class="step" data-rel-x="0" data-rel-y="1000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="icecream-pro crisps applepie-pro crisps-con"
	 data-bookmark-key-list="1 o j" >
        <h1>Ice cream: Con's</h1>

        <ul>
            <li>Not so great in the Winter</li>
            <li>If you're allergic to lactose/milk</li>
            <li>Diet alternatives are not real ice cream</li>
        </ul>
    </div>


    <!-- Crisps slides (3) -->
    <div id="crisps" class="step" data-x="3500" data-y="2000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="icecream-con crisps-pro icecream applepie"
	 data-bookmark-key-list="8 u k" >
        <h1>Crisps</h1>

        <ul>
            <li>Potatoes fried in oil and salted</li>
            <li>Various flavors</li>
            <li>Dips</li>
            <li>Can be used as ingredient in subs (Cliff Huxtable style)</li>
        </ul>
    </div>

    <div id="crisps-pro" class="step" data-rel-x="0" data-rel-y="1000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="crisps crisps-con icecream-pro applepie-pro"
	 data-bookmark-key-list="5 i k" >
        <h1>Crisps: Pro's</h1>

        <ul>
            <li>Simple yet tasty concept</li>
            <li>Great for snack</li>
            <li>Salty / spicy (not sweet)</li>
            <li>Finger food</li>
            <li>Diet alternatives are often ok</li>
        </ul>
    </div>


    <div id="crisps-con" class="step" data-rel-x="0" data-rel-y="1000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="crisps-pro applepie icecream-con applepie-con"
	 data-bookmark-key-list="2 o k" >
        <h1>Crisps: Con's</h1>

        <ul>
            <li>Commonly not used as dessert</li>
            <li>Not sweet</li>
        </ul>
    </div>


    <!-- Apple pie slides (3) -->
    <div id="applepie" class="step" data-x="5000" data-y="2000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="crisps-con applepie-pro crisps icecream-pro"
	 data-bookmark-key-list="9 u l" >
        <h1>Apple pie</h1>

        <ul>
            <li>Apple's in a pie</li>
            <li>Many recipes exist. (Grandma's is the best.)</li>
            <li>Vanilla sauce or cream on top</li>
        </ul>
    </div>

    <div id="applepie-pro" class="step" data-rel-x="0" data-rel-y="1000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="applepie applepie-con crisps-pro icecream-con"
	 data-bookmark-key-list="6 i l" >
        <h1>Apple pie: Pro's</h1>

        <ul>
            <li>Great for dessert</li>
            <li>Or just with a cup of tea or glass of milk</li>
            <li>Best when warm</li>
        </ul>
    </div>


    <div id="applepie-con" class="step" data-rel-x="0" data-rel-y="1000"
         data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
         data-goto-next-list="applepie-pro conclusion crisps-con conclusion"
	 data-bookmark-key-list="3 o l" >
        <h1>Apple pie: Con's</h1>

        <ul>
            <li>I'm allergic to apple (but a small slice is worth it)</li>
            <li>Not finger food</li>
        </ul>
    </div>


    <div id="conclusion" class="step" data-rel-x="1000" data-rel-y="1000"
	 data-bookmark-key-list="q" >
        <h1>Conclusion</h1>

        <p>Can I choose all three ;-)</p>

        <p style="font-size: small; position: absolute; bottom: 30px; left: 300px;" id="image-credits"
        >Image credits: <a href="https://www.flickr.com/photos/reimagingerica/35535918670">reimagingerica@Flickr</a>, 
                        <a href="https://www.flickr.com/photos/mixedmolly/6636957665">mixedmolly@Flickr</a>,
                        <a href="https://www.flickr.com/photos/stevepj2009/6296334551">stevepj2009@Flickr</a> </p>
    </div>

    <div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;"
	 data-bookmark-key-list="z [" >
    </div>
</div>

<div id="impress-toolbar"></div>

<div class="impress-progressbar"><div></div></div>
<div class="impress-progress"></div>

<div id="impress-help"></div>

<script type="text/javascript" src="../../js/impress.js"></script>
<script>impress().init();</script>

</body>
</html>
